<template>
  <div class='app-container' style="width:100%;">
    <el-form :model="tableForm" class="demo-ruleForm" style="width:100%;">
      <el-table :data="tableForm.tableData" border style="width: 100%" class="graphPropTable">
        <el-table-column prop="propLabel" label="属性" style="min-width:8;" height="20">
        </el-table-column>
        <el-table-column prop="propValue" label="值" style="min-width:3;" height="20">
          <template #default="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.propName'" >
              <el-select v-if="graphPropDef[scope.row.propName]['selectFlag']" v-model="scope.row.propValue"
                @change="onSelChg($event)" style="width:100%;">
                <el-option v-for="item in graphPropDef[scope.row.propName]['childitem']" :key="item.id"
                  :label="item.value" :value="item.id" style="width:100%;">
                </el-option>
              </el-select>
              <el-input-number v-if="graphPropDef[scope.row.propName]['slider']" 
              :min="1"
              :max="10"
              controls-position="right"
              size="large"
              v-model="scope.row.propValue" @change="onSelChg($event)" style="width:100%;">
              </el-input-number>
              <el-input v-if="graphPropDef[scope.row.propName]['selectFlag'] == false && graphPropDef[scope.row.propName]['slider']==false" type="textarea"
                v-model="scope.row.propValue" @change="onSelChg($event)" style="width:100%;">
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script setup>
import { ref ,onMounted,onUpdated,onActivated} from 'vue'

//图形属性定义json例子
let defaultGraphPropArr = {
    name: {
      selectFlag: false,
      vtype:'string',
      notnull:false,
      slider:false,
      vrepx:''
    },
    linewidth: {
      selectFlag: true,
      vtype:'float',
      notnull:true,
      vrepx:'number',
      slider:false,
      childitem: [
        { id: 'linewidth@1', value: '1' },
        { id: 'linewidth@2', value: '2' },
        { id: 'linewidth@3', value: '3' },
        { id: 'linewidth@4', value: '4' }
      ]
    },
    ptidx: {
      selectFlag: false,
      vtype:'int',
      notnull:true,
      vrepx:'number',
      slider:true
    }
  };

const graphPropDef = ref({})
const tableForm = ref({ tableData: [] });

var onSelChg = function (item) {
  console.log(item);
  // let pos = item.indexOf('@');
  // var propname = item.substr(0, pos);
  // var valLen = item.length - pos - 1;
  // var propval = item.substr(pos + 1, valLen);
  // var cmd = { propname, propval };
  // window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

onMounted(()=>{
  console.log("table onmouted----------------");
})


var initDatas = function(){
  let rst = window.canvasManager.initAccountDatas();
  graphPropDef.value = rst.graphPropDef;
  tableForm.value = rst.tableForm;
}

defineExpose({
  graphPropDef,
  tableForm,
  initDatas
});
</script>

